<template>
  <div>
    <h4>$children&&$parent传值：count: {{ count }}  num:{{num}} </h4>
    <div>
      <button @click="$children[0].count++">修改child1的count值</button>
      <button @click="$children[1].count++">修改child2的count值</button>
    </div>
    <Child1 />
    <Child2 />
    <Parent />
    <hr />

    <!-- 
    $children:获取到一个包含所有子组件(不包含孙组件)的实例对象组成的数组，
      可以直接拿到子组件中所有数据和方法等(不建议使用,因为$children拿到的子组件顺序不确定)
    $parent:获取当前组件的父节点的 实例对象，同样包含父节点中所有数据和方法等,
      可以操作父组件(不建议使用,因为一个组件可能有多个父组件,不好操作) 
    -->
  </div>
</template>

<script>
import Child1 from './Child1'
import Child2 from './Child2'
import Parent from './Parent'
export default {
  name: 'Props',
  components: {
    Child1,
    Child2,
    Parent
  },
  data() {
    return {
      count: 0,
      num: 1
    }
  },
  mounted() {
    console.log(this.$children)
  }
}
</script>

<style scoped>
div{
  color:darkkhaki;
}
</style>
